<template>
  <el-dialog
    v-model="dialogVisibled"
    :title="dialogTitle"
    width="500"
    :draggable="true"
    :before-close="closeClick"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="modelData"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="样式名称" prop="ButtonStyleName">
        <el-input v-model="modelData.buttonStyleName"  maxlength="20" />
      </el-form-item>
      <el-form-item label="按钮图标" prop="Icon">
        <el-input @click="iconDialogVisible = true" v-model="modelData.icon"  maxlength="20">
        </el-input>
      </el-form-item>
      <el-dialog
        v-model="iconDialogVisible"
        title="请选择图标"
        width="80%"
        :before-close="handleClose"
        @open="beforeOpen"
      >
        <div style="display: flex; flex-wrap: wrap">
          <div
            v-for="(name, index) in icons"
            :index="index"
            :key="index"
            style="
              cursor: pointer;
              padding: 5px;
              border: 1px solid rgb(227, 232, 232);
            "
            :class="currentIconName === name ? 'red' : ''"
            @click="currentIconName = name"
          >
            <component
              :is="name"
              style="width: 1.2rem; height: 1.2rem"
            ></component>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="iconDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleOk">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-form-item label="按钮大小" prop="Size">
        <el-select v-model="modelData.size" placeholder="请选择按钮大小">
          <el-option
            v-for="item in sizeList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否朴素按钮" prop="IsPlain">
        <el-radio-group v-model="modelData.isPlain" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否圆角按钮" prop="IsRound">
        <el-radio-group v-model="modelData.isRound" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="按钮颜色" prop="Color">
        <el-color-picker v-model="modelData.color" />
      </el-form-item>
      <el-form-item label="文本颜色" prop="TextColor">
        <el-color-picker v-model="modelData.textColor" />
      </el-form-item>
      <el-form-item label="按钮预览">
        <buttonStyleLayout :modelData="modelData"></buttonStyleLayout>
      </el-form-item>

      <div style="justify-content: right; align-items: right; display: flex">
        <el-button type="success" icon="Check" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <!-- <el-button
          type="warning"
          icon="RefreshRight"
          @click="resetForm(ruleFormRef)"
          >重置</el-button
        > -->
        <el-button type="danger" icon="Close" @click="closeClick"
          >关闭</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
  
  <script lang="ts">
import * as ElIcons from "@element-plus/icons-vue";
import {
  computed,
  defineComponent,
  PropType,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { buttonStyle, sizeList } from "../../model/buttonStyle/buttonStyle";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { insert, update } from "@/api/buttonStyle";
import buttonStyleLayout from "@/components/buttonStyle.vue";

export default defineComponent({
  components: {
    ...ElIcons,
    buttonStyleLayout,
  },
  name: "Naruto-Icon.vue",
  emits: ["update:iconName", "closeBnt"],
  props: {
    iconName: {
      type: String,
    },
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<buttonStyle>,
      required: true,
    },
  },
  setup(props, context) {
    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules<typeof props.modelData>>({
      buttonStyleName: [
        {
          required: true,
          message: "请填写样式名称!",
          trigger: "blur",
        },
      ],
    });

    const getData = () => {
      let icons = [];
      for (const name in ElIcons) {
        icons.push(name);
      }
      return icons;
    };
    const handleClose = () => {
      iconList.iconDialogVisible = false;
    };
    const beforeOpen = () => {};
    const handleOk = () => {
      props.modelData.icon = iconList.currentIconName;
      context.emit(`update:iconName`, iconList.currentIconName);
      handleClose();
    };
    const iconList = reactive({
      icons: getData(),
      iconDialogVisible: false,
      currentIconName: "Aim",
    });
    watch(
      () => props.modelData.icon,
      (val: any) => {
        props.modelData.icon = val;
        iconList.currentIconName = val;
      }
    );
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          if (props.modelData.buttonStyleId == "") {
            insert(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                closeClick();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          } else {
            update(props.modelData).then(({ code, msg }) => {
              if (code == 200) {
                closeClick();
                ElMessage({
                  message: msg,
                  type: "success",
                });
              }
            });
          }
        }
      });
    };

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    const closeClick = () => {
      context.emit("closeBnt");
      resetForm(ruleFormRef.value);
      //  done();
    };
    return {
      ...toRefs(iconList),
      handleClose,
      closeClick,
      beforeOpen,
      handleOk,
      dialogVisibled,
      sizeList,
      ruleFormRef,
      rules,
      submitForm,
      resetForm,
    };
  },
});
</script>
  
  <style scoped>
.red {
  background-color: palevioletred;
  color: white;
}
</style>
  
  
  